<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>库区编号</label>
                <el-input v-model="searchForm.AreaNumber" style="width: 160px;" placeholder="请输入库区编号"></el-input>
            </div>
            <div>
                <label>库区名称</label>
                <el-input v-model="searchForm.AreaName" style="width: 160px;" placeholder="请输入库区名称"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>

        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
            </div>

            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="AreaNumber" label="库区编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="AreaName" label="库区名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="WarehouseName" label="所属仓库" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Location" label="位置" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Area" label="面积" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Charge" label="负责人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column   label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
        </div>
        <el-dialog  :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="30%" @close="closeDialog">
           <WmWarehouseAreaInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible"/>
        </el-dialog>

    </div>
</template>

<script>
import WmWarehouseAreaInput from './components/WmWarehouseAreaInput.vue';
import Pagination from '@/components/Pagination.vue';

export default{
    components:{
        WmWarehouseAreaInput,
        Pagination,
    },
    mounted(){
        this.dataBind();
    },
    data(){
        return{
            searchForm:{
                MeasureCode:'',
                MeasureName:'',
            },
            dialogDomain:{
                title:'新增库区',
                dialogVisible:false
            },
            isUpdate:false,
            model:{
                AreaNumber:'',
                AreaName:'',
                WarehouseName:'',
                Location:'',
                Area:'',
                Charge:'',
                Remark:'',
        
            },
            pageDomain:{
                PageIndex:1,
                PageSize:10,
                TotalCount:0
            },
            tableData:[],
            isLoading:false
        }
    },
    methods:{
        add(){
            this.dialogDomain.title="新增计量单位";
            this.dialogDomain.dialogVisible=true;
            this.isUpdate=false;
        },
        update(model){
            this.dialogDomain.title="编辑计量单位";
            this.dialogDomain.dialogVisible=true;
            this.isUpdate=true;

            console.log(model);
            this.model = model;
        },
        dels(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/WmWarehouseArea/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
            
        },
        del(model){
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.delete('/api/WmWarehouseArea',{
                    data:{
                        id:model.Id
                    },
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});  
        },

        closeDialog(){
            this.model={
                AreaNumber:'',
                AreaName:'',
                WarehouseName:'',
                Location:'',
                Area:'',
                Charge:'',
                Remark:'',
             
            }
        },
        search(){
            this.pageDomain.PageIndex=1;
            this.dataBind();
        },
        reset(){
            this.searchForm.AreaNumber='';
            this.searchForm.AreaName='';
        },
          //新增或编辑页面回调
          callback(){
            let actionName = this.isUpdate?'编辑':'新增';
            this.showNotify(actionName+'库区成功','success');
            this.dialogDomain.dialogVisible=false;
            this.dataBind();
        },

        
        //分页方法
        handleSizeChange(val){
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val){
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        dataBind(){
            this.isLoading=true;
            this.$http.get('/api/WmWarehouseArea',
            {
                params:{
                    PageIndex:this.pageDomain.PageIndex,
                    PageSize:this.pageDomain.PageSize,
                    AreaNumber:this.searchForm.AreaNumber,
                    AreaName:this.searchForm.AreaName,
                }
            })
            .then(res=>{
                this.tableData=res.Data;
                this.pageDomain.TotalCount = res.Count;
                this.isLoading=false;
            })
        }
    }



}
</script>

<style scoped>

 </style>